<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500 - 服务器错误</title>
    <script src="/static/tailwindcss/3.4.16.js"></script>
    <link href="/static/font-awesome/6.7.2.css" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF4D4F',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                            800: '#0A0C10',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'error-shake': 'errorShake 0.5s ease-in-out',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        errorShake: {
                            '0%, 100%': { transform: 'translateX(0)' },
                            '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
                            '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' },
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 min-h-screen flex flex-col transition-colors duration-300">
<!-- 错误内容 -->
<main class="flex-1 flex flex-col items-center justify-center px-4 py-12">
    <div class="max-w-4xl w-full text-center">
        <!-- 装饰元素 -->
        <div class="relative mb-12">
            <div class="absolute -left-10 top-10 w-20 h-20 bg-accent/10 dark:bg-accent/20 rounded-full animate-float"></div>
            <div class="absolute -right-10 top-0 w-16 h-16 bg-primary/10 dark:bg-primary/20 rounded-full animate-float-delay-1"></div>
            <div class="absolute left-1/4 -bottom-10 w-12 h-12 bg-secondary/10 dark:bg-secondary/20 rounded-full animate-float-delay-2"></div>

            <!-- 错误代码 -->
            <div class="relative">
                <h1 class="text-[clamp(8rem,20vw,15rem)] font-black text-neutral-200 dark:text-neutral-700 mb-6 animate-error-shake">
                    500</h1>
                <div class="absolute inset-0 flex items-center justify-center">
                    <i class="fa-solid fa-bolt text-[clamp(3rem,8vw,6rem)] text-accent animate-pulse-slow"></i>
                </div>
            </div>
        </div>

        <!-- 错误信息 -->
        <div class="bg-white dark:bg-neutral-700 rounded-2xl shadow-xl p-8 md:p-12 mb-8 animate-on-scroll">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-800 dark:text-white mb-4">
                服务器内部错误</h2>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto">
                抱歉，我们的服务器遇到了问题。我们的技术团队已经收到通知，正在努力解决这个问题。请稍后再试。
            </p>

            <!-- 建议 -->
            <div class="bg-neutral-50 dark:bg-neutral-600/50 rounded-xl p-6 mb-8 text-left">
                <h3 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fa-solid fa-lightbulb text-accent mr-3"></i>
                    你可以尝试以下操作
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>刷新当前页面，按 F5 或点击浏览器的刷新按钮</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>检查你的网络连接是否稳定</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>继续浏览我们的其他内容</span>
                    </li>
                </ul>
            </div>

            <!-- 按钮组 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="index.html"
                   class="px-8 py-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all duration-200 scale-hover flex items-center justify-center">
                    <i class="fa-solid fa-home mr-2"></i> 返回首页
                </a>
                <a href="javascript:history.back()"
                   class="px-8 py-4 bg-white dark:bg-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-500 text-neutral-800 dark:text-neutral-200 font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200 scale-hover flex items-center justify-center">
                    <i class="fa-solid fa-arrow-left mr-2"></i> 返回上一页
                </a>
            </div>
        </div>

        <!-- 状态指示 -->
        <div class="bg-white dark:bg-neutral-700 rounded-xl shadow-md p-6 max-w-xl mx-auto animate-on-scroll">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg">系统状态</h3>
                <span id="status-indicator"
                      class="px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
                        <i class="fa-solid fa-circle mr-1 animate-pulse"></i> 正在修复
                    </span>
            </div>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fa-solid fa-server text-primary mr-3"></i>
                        <span>主服务器</span>
                    </div>
                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100">
                            异常
                        </span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fa-solid fa-database text-primary mr-3"></i>
                        <span>数据库</span>
                    </div>
                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
                            部分正常
                        </span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fa-solid fa-cloud text-primary mr-3"></i>
                        <span>API服务</span>
                    </div>
                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
                            正常
                        </span>
                </div>
            </div>
            <div class="mt-4 text-sm text-neutral-500 dark:text-neutral-400 text-center">
                最后更新时间: <span id="last-update">2025-05-17 15:30:45</span>
            </div>
        </div>
    </div>
</main>
</body>
</html>
